<template lang="pug">
  Modal(v-model="createShow" title="新建账号" width="500")
    .created-info
      Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100")
        FormItem(label="管理员姓名：" prop="title")
          Input(v-model="formValidate.title" type="text" placeholder="请输入企业编号")
        FormItem(label="管理员账号：" prop="name")
          Input(v-model="formValidate.name" type="text" placeholder="请输入企业名称")
        FormItem( label="管理总企业：")
          Select(v-model="formValidate.edu" @on-change="wayChange" placeholder="请选择企业名称" multiple)
            Option(v-for="(item, index) in enterpriseList" :value="item" :key="item") {{ item }}
        FormItem( label="管理子公司：")
          Select(v-model="formValidate.address" @on-change="wayChange" placeholder="请选择子企业名称，没有可不选" multiple)
            Option(v-for="(item, index) in wayList2" :value="item" :key="item") {{ item }}
    .text-center(slot="footer")
      Button(@click="createShow=false") 取消
      Button(type="info" @click="confirmFn('formValidate')") 提交
</template>

<script>
export default {
  data () {
    return {
      time_1: '',
      time_2: '',
      imgUrl: '',
      createShow: false,
      wayList: ['公司一', '公司二'],
      wayList2: ['子公司一', '子公司二'],
      enterpriseList: ['瑞幸咖啡', '平安银行'],
      formValidate: {
        avatar: '',
        name: '',
        sex: '',
        age: '',
        edu: [],
        address: [],
        work_year: '',
        work_experience: '',
        identity: '',
        identityCardNO: '',
        bankCardNO: ''
      },
      ruleValidate: {
        name: [
          { required: true, message: '企业名称不能为空', trigger: 'change' }
        ],
        title: [
          { required: true, message: '订单名称不能为空', trigger: 'blur' }
        ],
        salary: [
          { required: true, message: '佣金不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '订单内容不能为空', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '服务时间不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '工作地点不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    modalOpen () {
      this.createShow = true
    },
    handleUpload (file) {
      this.formValidate.avatar = file
      console.log(this.formValidate.avatar)
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        const _base64 = reader.result
        this.imgUrl = _base64
      }
      return false
    },
    wayChange (val) {
      console.log(val)
      if (val === '时间') {
        this.formValidate.unit = '小时'
        this.ruleValidate.time = [
          { required: true, message: '服务时间不能为空', trigger: 'blur' }
        ]
      } else {
        this.formValidate.unit = '单'
        delete this.ruleValidate.time
      }
    },
    confirmFn (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
          this.createShow = false
        } else {
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  span.style-1{
    vertical-align: middle;
  }
  .d-f-c{
    display: flex;
    align-items: center;
  }
  .avatar{
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    span{
      width: 100%;
      display: inline-block;
      text-align: center;
    }
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
</style>
